<template>
  <div class="association-activity">
    <div class="divider_header">
      <div class="titel">
        <div class="divider divider-l"></div>
        <h5>协会活动</h5>
        <div class="divider divider-r"></div>
      </div>
      <div class="more" @click="$router.push('/dynamic/activity')">
        <span>更多协会活动</span>
        <img src="@/assets/home_more.png" alt="" />
      </div>
    </div>
    <div class="content">
      <div
        v-for="(item, index) in list"
        :key="index"
        :style="{
          width: index < 2 ? '50%' : '25%',
          display: 'flex',
          marginBottom: '20px',
        }"
      >
        <!-- // 卡片样式1 -->
        <el-card class="card" shadow="hover" v-if="index < 2">
          <div
            class="card-l"
            @click="jump(item.associationActivityId)"
            :style="{ minHeight: pageW >= 1920 ? '240px' : '180px' }"
          >
            <div
              style="text-align: left; padding-bottom: 10px; fontsize: 24px"
              v-if="pageW < 1920"
            >
              <span v-if="item.activityState == 1" style="color: #0b4e9e"
                >活动预约中
              </span>
              <span v-else>活动已结束 </span>
            </div>

            <img
              v-if="item.activityCover"
              :src="$store.state.baseUrl + item.activityCover"
              alt=""
              :style="{ height: pageW >= 1920 ? '' : '160px' }"
            />
            <img
              v-else
              src="@/assets/default.jpg"
              alt=""
              :style="{ height: pageW == 1920 ? '' : '160px' }"
            />
          </div>
          <div class="card-r" @click="jump(item.associationActivityId)">
            <h5>{{ item.activityTitle }}</h5>
            <div>
              <img src="@/assets/home_host.png" alt="" />
              <span style="-webkit-line-clamp: 1">{{
                item.activityOrganizer
              }}</span>
            </div>
            <div>
              <img src="@/assets/home_address.png" alt="" />
              <span>{{ item.activityAddress }}</span>
            </div>
            <div>
              <img src="@/assets/home_start time.png" alt="" />
              <span>{{ item.startTime | formatTime }}</span>
            </div>
            <div>
              <img src="@/assets/home_end time.png" alt="" />
              <span>{{ item.endTime | formatTime }}</span>
            </div>
            <div>
              <img src="@/assets/home_phone.png" alt="" />
              <span>{{ item.bookingLine }}</span>
            </div>
            <div v-if="pageW >= 1920">
              <el-button
                v-if="item.activityState == 1"
                size="mini"
                class="btn"
                style="border: 1px solid #0b4e9e; color: #0b4e9e"
                >预约中</el-button
              >
              <el-button v-else class="btn" size="mini" style="" disabled
                >已结束</el-button
              >
            </div>
          </div>
        </el-card>
        <!-- // 卡片样式2 -->
        <el-card
          class="item"
          shadow="hover"
          v-else
          :style="{
            width: '100%',
            marginBottom: '33px',
          }"
        >
          <div @click="jump(item.associationActivityId)">
            <img
              v-if="item.activityCover"
              :src="$store.state.baseUrl + item.activityCover"
              alt=""
            />
            <img v-else src="@/assets/default.jpg" alt="" />
            <div class="info">
              <p class="titel">{{ item.activityTitle }}</p>
              <p class="time">{{ item.startTime | formatTime }}</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script >
export default {
  props: ["list"],
  data() {
    return {
      pageW: 1920,
    };
  },
  mounted() {
    this.pageW = window.screen.width;
  },
  methods: {
    jump(id) {
      this.$router.push(`/activityDetail/${id}`);
    },
  },
};
</script>
<style lang="less">
.association-activity {
  width: 75%;
  padding: 78px 0 96px 0;
  box-sizing: border-box;
  margin: 0 auto;
  .content {
    display: flex;
    flex-wrap: wrap;
    .el-card__body {
      display: flex;
    }
    .card {
      cursor: pointer;
      margin-right: 20px;
      box-sizing: border-box;
      padding: 20px 17px;
      .card-l {
        min-width: 50%;
        position: relative;
        margin-right: 1rem;
        min-height: 240px;
        img {
          max-width: 100%;
          height: 13vw;
        }
        p {
          position: absolute;
          top: 50%;
          width: 100%;
          padding: 0 40px;
          box-sizing: border-box;
          font-size: 20px;
          word-break: break-all;
          color: #fff;
          text-align: center;
        }
      }
      .card-r {
        position: relative;
        h5 {
          margin: 0 0 10px 0;
          padding-bottom: 10px;
          border-bottom: 1px solid #e8f2fd;
          font-size: 1.5rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 320px;
        }
        div {
          margin-bottom: 8px;
          display: flex;
          img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            vertical-align: middle;
          }
          span {
            flex: auto;
            overflow: hidden;
            display: block;
            max-width: 294px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: #666666;
            // font-size: 14px;
          }
        }
        .btn {
          border: 1px solid #ccc;
          position: absolute;
          bottom: 0;
          left: 0;
          font-size: 16px;
        }
      }
    }
    .item {
      margin-right: 18px;
      .el-card__body {
        display: block;
      }
      img {
          width: 100%;
          height: 13vw;
        }
      .info {
        height: 114px;
        position: relative;
        padding: 16px;
        box-sizing: border-box;
        .titel {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .time {
          position: absolute;
          left: 16px;
          bottom: 24px;
        }
      }
    }
  }
}
</style>